<template>
  <div id="RecommendRadio">
    <div class="top">
      <ul>
        <h3><a href="">推荐节目</a></h3>
        <li v-for="item in recProgammelist" :key="item.score">
          <img :src="`${item.program.coverUrl}?param=40y40`" />
          <div style="font-size: 12px; width: 70%; margin-left: 10px">
            <p>{{ item.program.name }}</p>
            <span style="color: #999999">{{ item.program.radio.name }}</span>
          </div>
          <el-tag type="info">{{ item.program.radio.category }}</el-tag>
        </li>
      </ul>
      <ul>
        <h3><a href="">节目排行榜</a></h3>
        <li v-for="item in programmelist" :key="item.score">
          <em>{{ item.rank }} </em>
          <img :src="`${item.program.coverUrl}?param=40y40`" />
          <div style="font-size: 12px; width: 70%; margin-left: 10px">
            <p>{{ item.program.name }}</p>
            <span style="color: #999999">{{ item.program.radio.name }}</span>
          </div>
          <el-tag type="info">{{ item.program.radio.category }}</el-tag>
        </li>
      </ul>
    </div>

    <div class="radioMore">
      <div
        v-for="(item, index) in radioMore || []"
        :key="index"
      >
        <h3 v-if="radioMore.length === 5">
          <a>{{ item[0].category ? item[0].category : "" }}</a
          >·电台
        </h3>
        <ul>
          <li
            v-for="(radio, index2) in item"
            :key="radio.id"
            v-show="index2 <= 3"
          >
            <img :src="`${radio.picUrl}?param=140y140`" />
            <div>
              <a>{{ radio.name }}</a>
              <p>{{ radio.rcmdtext }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendRadio",
  data() {
    return {
      programmelist: [],
      recProgammelist: [],
      radioMore: [],
    };
  },
  beforeMount() {
    this.$API.djProgramToplist().then((res) => {
      if (res.data.code === 200) {
        this.programmelist = res.data.toplist;
      }
    });

    this.$API.djProgramToplistHours().then((res) => {
      if (res.data.code === 200) {
        this.recProgammelist = res.data.data.list;
      }
    });

    this.$API.djRadioHot({ limit: 4, cateId: 2 }).then((res) => {
      if (res.data.code === 200) {
        this.$set(this.radioMore, 0, res.data.djRadios);
      }
    });
    this.$API.djRadioHot({ limit: 4, cateId: 6 }).then((res) => {
      if (res.data.code === 200) {
        this.$set(this.radioMore, 1, res.data.djRadios);
      }
    });
    this.$API.djRadioHot({ limit: 4, cateId: 3 }).then((res) => {
      if (res.data.code === 200) {
        this.$set(this.radioMore, 2, res.data.djRadios);
      }
    });
    this.$API.djRadioHot({ limit: 4, cateId: 2001 }).then((res) => {
      if (res.data.code === 200) {
        this.$set(this.radioMore, 3, res.data.djRadios);
      }
    });
    this.$API.djRadioHot({ limit: 4, cateId: 11 }).then((res) => {
      if (res.data.code === 200) {
        this.$set(this.radioMore, 4, res.data.djRadios);
      }
    });
  },
};
</script>

<style scoped>
.top {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.top ul {
  margin: 15px 0;
  width: 48%;
}

.top ul li {
  height: 60px;
  padding: 10px;
  display: flex;
  justify-content: start;
  border: 1px solid #e2e2e2;
  border-top: 0;
}

.top ul li:nth-child(2n + 1) {
  background-color: #f7f7f7;
}

.radioMore > div {
  margin: 50px 0 0 0;
}

.radioMore a:hover {
  border-bottom: #242424 2px solid;
}

.radioMore ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}

.radioMore ul li {
  flex: 45%;
  margin-right: 25px;
  padding: 30px 0;
  display: flex;
}

.radioMore ul li:nth-child(-n + 2) {
  border-bottom: #e7e7e7 1px solid;
}

.radioMore ul li div {
  margin-left: 20px;
  padding: 20px 0 0 0;
}

.radioMore ul li div a {
  font-size: 18px;
}

.radioMore ul li p {
  font-size: 12px;
  color: #999999;
  margin-top: 25px;
}

h3 {
  font-size: 24px;
  border-bottom: 2px #c20c0c solid;
  display: block;
  padding: 0 0 10px 0;
}
</style>